<template>
   <div class="time-table">
     <div class="banner" >
       <div class="panel" v-if="yuchanqi">
         <van-tag color="#F05C79" text-color="#fff">预产期</van-tag>
         <h2 class="title">{{yuchanqi.dateline}}</h2>
         <van-button size="mini" round plain class="none-style" @click="show = true">修改</van-button>
       </div>
     </div>
     <div class="table-list" v-if="timeTable.length">
       <van-cell is-link center v-for="(item,index) in timeTable" :key="index" :to="`/user/timetable/detail/${item.id}`">
         <template #title>
          <span class="custom-title">第{{item.frequency}}次产检 孕第{{item.cycle_start}}-{{item.cycle_end}}周</span> <van-tag type="success" v-if="item.is_stomach">需空腹</van-tag>
        </template>
        <template #label>
          <span class="label">重点：<em v-for="keynote in item.keynote_item" :key="keynote.id">{{keynote.name}}</em></span>
        </template>
       </van-cell>
       
     </div>
     <p class="bottom-tips">参考资料：卫生部《孕产期保健工作管理办法》和《孕产期保健工作规范》；国家计生委《孕产妇妊娠风险评估与管理工作规范》；</p>

     <van-calendar v-model="show" color="#4ECE40" :min-date="minDate" :max-date="maxDate" @confirm="birthConfirm" />
   </div>
</template>

<script>
import { contentTimesServer,yuchanqiTimesServer,contentTimesEditServer } from '@/service/server';
import dayjs from 'dayjs';
export default {
   data () {
      return {
        timeTable: [],
        yuchanqi: {},
        staticPath: process.env.VUE_APP_STATIC_PATH,
        show: false,
        minDate: new Date(1977, 0, 1),
        maxDate: new Date(dayjs().add(1, 'year')) ,
      };
   },

   components: {},

   computed: {},

   created(){
     this.queryTimeList();
   },

   methods: {
     birthConfirm(e){
      this.show = false
      let time = dayjs(e).format("YYYY-MM-DD");
      this.changeDate({
        dateline: time
      })
    },
    async changeDate(params){
      let result = await contentTimesEditServer(params);
      if(result.status == 200){
        this.queryTimeList();
      }
    },
     async queryTimeList(){
       let result = await contentTimesServer();
       let yuchan = await yuchanqiTimesServer();
       if(yuchan.status == '200'){
         this.yuchanqi = yuchan.data.model.length > 0 ? yuchan.data.model[0] : {}
       }else{
         this.$toast(yuchan.message)
       }
       if(result.status == '200'){
         this.timeTable = result.data.model
       }else{
         this.$toast(result.message)
       }
     }
   }
}
</script>
<style lang='less'>
.time-table{
  height: 100vh;
  background: #f5f5f5;
  .table-list{
    margin-top: -60px;
    padding: 15px;
    .van-cell{
      margin-top: 12px;
      border-radius: 12px;
    }
  }
  .bottom-tips{
    padding: 15px;
  }
  .banner{
    width: 100%;
    height: 175px;
    background: #FEBEBE;
    padding: 15px;
    display: flex;
    .panel{
      display: flex;
      flex-direction: column;
      .none-style{
        width: 60px;
        &.van-button{
          background: transparent;
          color: #fff;
        }
      }
      .van-tag{
        justify-content: center;
        flex-basis: 25px;
        width: 60px;
      }
      .title{
        font-size: 20px;
        color: #fff;
        padding: 10px 0;
      }
    }
  }
}
</style>